<template>
  <el-dialog
      title="新增试题"
      :close-on-click-modal="false"
      :visible.sync="visible">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()"
             label-width="120px">
      <el-form-item label="单选题" prop="courseId">
        <el-select v-model="dataForm.examOne" @change="multipleScore" multiple placeholder="请选择题所属课程" style="width: 100%">
          <el-option
              v-for="item in questionOne"
              :key="item.id"
              :label="item.content"
              :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="单选题/分数" prop="title">
        <el-input-number v-model="dataForm.examOneScore" @change="multipleScore" :min="1" :max="100"
                         label="描述文字"></el-input-number>
      </el-form-item>
      <el-divider></el-divider>
      <el-form-item label="多选题" prop="examTwo">
        <el-select v-model="dataForm.examTwo" @change="multipleScore" multiple placeholder="请选择题所属课程" style="width: 100%">
          <el-option
              v-for="item in questionTwo"
              :key="item.id"
              :label="item.content"
              :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="多选题/分数" prop="title">
        <el-input-number v-model="dataForm.examTwoScore" @change="multipleScore" :min="1" :max="100"
                         label="描述文字"></el-input-number>
      </el-form-item>
      <el-divider></el-divider>
      <el-form-item label="判断题" prop="examThree">
        <el-select v-model="dataForm.examThree" @change="multipleScore" multiple placeholder="请选择题所属课程" style="width: 100%">
          <el-option
              v-for="item in questionThree"
              :key="item.id"
              :label="item.content"
              :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="判断题/分数" prop="title">
        <el-input-number v-model="dataForm.examThreeScore" @change="multipleScore" :min="1" :max="100"
                         label="描述文字"></el-input-number>
      </el-form-item>
      <el-divider></el-divider>
<!--      <el-form-item label="主观题" prop="examFour">-->
<!--        <el-select v-model="dataForm.examThree" @change="multipleScore" multiple placeholder="请选择题所属课程" style="width: 100%">-->
<!--          <el-option-->
<!--              v-for="item in questionThree"-->
<!--              :key="item.id"-->
<!--              :label="item.content"-->
<!--              :value="item.id">-->
<!--          </el-option>-->
<!--        </el-select>-->
<!--      </el-form-item>-->
<!--      <el-form-item label="主观题/分数" prop="title">-->
<!--        <el-input-number v-model="dataForm.examThreeScore" @change="multipleScore" :min="1" :max="100"-->
<!--                         label="描述文字"></el-input-number>-->
<!--      </el-form-item>-->
<!--      <el-divider></el-divider>-->
      <el-form-item label="总分" prop="title">
        <el-input v-model="dataForm.fullScore" @change="multipleScore" placeholder="总分" disabled></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()" v-if="canSubmit">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {fetchQuestionList, addQuestion} from '@/api/teacher/question'

export default {
  data() {
    return {
      // courseId: '',
      questionOne: [],
      questionTwo: [],
      questionThree: [],
      visible: false,
      canSubmit: false,
      dataForm: {
        examId: 0,
        examOne: [],
        examTwo: [],
        examThree: [],
        examOneScore: 1,
        examTwoScore: 1,
        examThreeScore: 1,
        fullScore: 0,
        type: 0,
      },
      dataRule: {
        // title: [
        //   {required: true, message: '考试名不能为空', trigger: 'blur'}
        // ],
        // userId: [
        //   {required: true, message: '创建人ID不能为空', trigger: 'blur'}
        // ],
        // startTime: [
        //   {required: true, message: '开始时间不能为空', trigger: 'blur'}
        // ],
        // endTime: [
        //   {required: true, message: '结束时间不能为空', trigger: 'blur'}
        // ],
        // fullScore: [
        //   {required: true, message: '满分不能为空', trigger: 'blur'}
        // ],
        // createTime: [
        //   {required: true, message: '创建时间不能为空', trigger: 'blur'}
        // ],
        // updateTime: [
        //   {required: true, message: '更新时间不能为空', trigger: 'blur'}
        // ]
      }
    }
  },
  created() {
  },
  methods: {
    getQuestionOne(courseId) {
      fetchQuestionList({type: 0, courseId: courseId}).then(response => {
        this.questionOne = response.data
      })
    },
    getQuestionTwo(courseId) {
      fetchQuestionList({type: 1, courseId: courseId}).then(response => {
        this.questionTwo = response.data
      })
    },
    getQuestionThree(courseId) {
      fetchQuestionList({type: 2, courseId: courseId}).then(response => {
        this.questionThree = response.data
      })
    },
    init(id, courseId) {
      this.getQuestionOne(courseId)
      this.getQuestionTwo(courseId)
      this.getQuestionThree(courseId)
      console.log(courseId)
      this.visible = true;
      this.courseId = courseId;
      this.canSubmit = true;
      this.$nextTick(() => {
        this.$refs['dataForm'].resetFields()
        addQuestion({id: id}).then(response => {
          this.dataForm = response.data
          this.dataForm.examId = id
        })
      })
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          addQuestion(this.dataForm).then(data => {
            this.$notify.success('添加成功')
            this.visible = false
            this.$emit('refreshDataList')
          }).catch(() => {
            this.canSubmit = true;
          });
        }
      })
    },
    multipleScore() {
      const one = this.dataForm.examOne.length * this.dataForm.examOneScore
      const two = this.dataForm.examTwo.length * this.dataForm.examTwoScore
      const three = this.dataForm.examThree.length * this.dataForm.examThreeScore
      this.dataForm.fullScore = one + two + three
    }
  }
}
</script>
